<template>
  <div class="user_right fl ml20">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="修改密码" name="first">
        <dl class="com_form p30 pb 40">
          <!-- <dd class="clearfix"><b><i>*</i>旧密码：</b>
            <p>
              <input type="text" name="" id="">
              <span id="" v-show="oldpsw" class="note_false" style="margin-left: 0px;">请输入旧密码。</span>
            </p>
          </dd> -->
            <dd class="clearfix"><b><i>*</i>手机号：</b>
            <p>
              <input v-model="neparams.phone" name="" type="text" id="" class="w280 ">
              <span id="" show=""><i style="display:none"></i></span>
            </p>
          </dd>
          <dd class="clearfix"><b><i>*</i>新密码：</b>
            <p>
              <input v-model="neparams.password" name="" type="password" id="" class="w280 ">
              <span id="" show=""><i style="display:none"></i></span>
            </p>
          </dd>
           <dd class="clearfix"><b><i>*</i>验证码：</b>
            <p>
              <input v-model="neparams.verification_code" name="" type="text" id="" class="w280 ">
            </p>
            <span v-show="show" class="btn_gm" @click="getPhoneCode">获取验证码</span>
            <span v-show="!show" class="count">{{count}} s</span>
          </dd>
          <dt><a href="javascript:;" class="sbt bg4448f8" @click="resetPwdHandle">确认提交</a></dt>
        </dl>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { phoneCode, resetPwd } from '@/api/user'
export default {
  name: 'rt-safe',
  data () {
    return {
      activeName: 'first',
      hasMod: true,
      oldpsw: false,
      show: true,
      count: '',
      timer: null,
      neparams: {
        password: '',
        phone: '',
        verification_key: '',
        verification_code: ''
      }
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    async getPhoneCode () {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
      const res = await phoneCode({ phone: this.neparams.phone })
      if (res.key) {
        this.neparams.verification_key = res.key
      }
    },
    async resetPwdHandle () {
      const params = this.neparams
      const res = await resetPwd(params)
      console.log(res)
      this.$message.success('密码修改成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.user_right {
  width: 950px;
  background: #fff;
  /deep/.el-tabs {
    padding-bottom: 40px;
    padding: 30px;
    .el-tabs__header {
      height: 40px;
      border-bottom: 1px solid #e6e6e6;
      .el-tabs__item {
        padding: 0 38px;
        height: 40px;
        box-sizing: border-box;
        line-height: 40px;
        display: inline-block;
        list-style: none;
        font-weight: 500;
        color: #4448f8;
        position: relative;
        font-size: 18px;
      }
      .el-tabs__item:hover {
        color: #4448f8;
      }
      .el-tabs__active-bar {
        height: 3px;
        background-color: #4448f8;
        width: 110px !important;
        transform: translateX(25px) !important;
      }
    }
    .el-tabs__content {
      color: #333;
      margin-top: 30px;
      .com_form {
        padding: 50px 0 30px;
        color: #333;
        dd {
          margin-bottom: 20px;
          line-height: 36px;
        }
        b {
          float: left;
          width: 140px;
          text-align: right;
          i {
            color: #ff0000;
            margin-right: 5px;
          }
        }
        p {
          float: left;
          position: relative;
          top: 0px;
          left: 0px;
          input {
            margin-right: 10px;
            border: 1px solid #e6e6e6;
            height: 34px;
            line-height: 34px;
            text-indent: 5px;
          }
        }
        dt {
          padding-left: 140px;
          .sbt {
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            display: inline-block;
            margin-top: 25px;
            margin-right: 20px;
            border: 0;
            background: #4448f8;
            color: #fff;
          }
        }
      }
      .relative {
        position: relative;
      }
      .w280 {
        width: 280px;
      }
    }
  }
}
.btn_gm{
  padding: 11px 20px;
  background: #4448f8;
  color: #fff;
}
</style>
